<script setup>
import { ref, onMounted, watch } from 'vue';
import RainEffect from '@/views/Map/Weather/rain.js';
import SnowEffectClass from '@/views/Map/Weather/snow.js';
import FogEffectClass from '@/views/Map/Weather/fog.js';
const props = defineProps({
  viewer: {
    type: Object,
    required: true,
  },
});

const rainEffect = ref(null);
const isRainVisible = ref(false);
const SnowEffect = ref(null);
const isSnowEffect = ref(false);
const FogEffect = ref(null)
const isFogEffect = ref(false)

onMounted(() => {
  if (props.viewer) {
    rainEffect.value = new RainEffect();
    rainEffect.value.init(props.viewer);
    rainEffect.value.show(isRainVisible.value);

    SnowEffect.value = new SnowEffectClass();
    SnowEffect.value.init(props.viewer);
    SnowEffect.value.show(isSnowEffect.value);

    FogEffect.value = new FogEffectClass();
    FogEffect.value.init(props.viewer);
    FogEffect.value.show(isFogEffect.value);
  }
});

const toggleRainEffect = () => {
  if (props.viewer) {
    isRainVisible.value = !isRainVisible.value;
    rainEffect.value.show(isRainVisible.value)

    //隐藏其他天气效果
    isSnowEffect.value = false;
    SnowEffect.value.show(isSnowEffect.value);

    isFogEffect.value = false;
    FogEffect.value.show(isFogEffect.value)
  }
};
const toggleSnowEffect = () => {
  if (props.viewer) {
    isSnowEffect.value = !isSnowEffect.value;
    SnowEffect.value.show(isSnowEffect.value);

    // 隐藏其他天气效果
    isRainVisible.value = false;
    rainEffect.value.show(isRainVisible.value);

    isFogEffect.value = false;
    FogEffect.value.show(isFogEffect.value);
  }
};

const toggleFogEffect = () => {
  if (props.viewer) {
    isFogEffect.value = !isFogEffect.value;
    FogEffect.value.show(isFogEffect.value);

    // 隐藏其他天气效果
    isRainVisible.value = false;
    rainEffect.value.show(isRainVisible.value);

    isSnowEffect.value = false;
    SnowEffect.value.show(isSnowEffect.value);
  }
};

const clearAllEffect = () => {
  if (props.viewer) {
    isRainVisible.value = false;
    rainEffect.value.show(isRainVisible.value);

    isSnowEffect.value = false;
    SnowEffect.value.show(isSnowEffect.value);

    isFogEffect.value = false;
    FogEffect.value.show(isFogEffect.value);

  }

  if (props.viewer) {
    props.viewer.entities.removeAll(); // 清除所有实体
  }
}

watch(
  () => props.viewer,
  (newViewer) => {
    if (newViewer) {
      rainEffect.value = new RainEffect();
      rainEffect.value.init(newViewer);
      rainEffect.value.show(isRainVisible.value);

      SnowEffect.value = new SnowEffectClass();
      SnowEffect.value.init(newViewer);
      SnowEffect.value.show(isSnowEffect.value);

      FogEffect.value = new FogEffectClass();
      FogEffect.value.init(newViewer)
      FogEffect.value.show(isFogEffect.value)
    }
  }
);

</script>
<template>
  <div id="SwitchLayers">
    <el-dropdown placement="top-start">
      <el-button> 天气切换 </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="toggleFogEffect">今日雾霾</el-dropdown-item>
          <el-dropdown-item @click="toggleRainEffect">今日降雨</el-dropdown-item>
          <el-dropdown-item @click="toggleSnowEffect">今日有雪</el-dropdown-item>
          <el-dropdown-item @click="clearAllEffect">清楚效果</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<style scoped lang="less">
#SwitchLayers {
  position: absolute;
  z-index: 1;
  bottom: 40px;
  //位置绝对定位居中
  left: 50%;
  transform: translateX(-50%); // 居中

  .el-button {
    background-color: #000;
    color: #4ADE80;
    border: 1px solid #4ADE80;
    border-radius: 4px;
  }

  .el-button:hover {
    background-color: #4ADE80;
    color: #000;
    border: 1px solid #4ADE80;
  }

}
</style>
